<style type="text/css">
    .user-baseinfo{
        background-color: #f0f0f0;margin: 15px;padding: 15px;
    }
    .nav-pills-active{
        border-bottom: 1px solid #f10808;
    }
    .nav-pills-active a{
        color:#f10808 !important;
    }
    .hero-unit{
        background-color:#e4c477;
        padding: 1%;
        margin: 0.5% 0 0 0.5%;
        float: left;
    }
    .hero-unit ul li{
        list-style: none;
        line-height: 30px;
    }
    .coupon-item-list{
        display: none;
    }
    .btn-tag-add{
        cursor: pointer;
    }
</style>
<div class="panel panel-default panel-intro">
    {:build_heading()}
 
    <div class="panel panel-default">
        <div class="panel-body">
            <div class="row">
                <div class="col-xs-10">
                    <span>操作</span>
                </div>
                <div class="col-xs-2">
                    <div class="float-right col-xs-6">
                        <button type="button" class="btn btn-info set-tags" data-url="{:url('user/user/addusertag')}" data-id="{$userData['id']}" style="color:#fff;background-color:#f75444">设置标签</button>
                    </div>
                    <div class="float-right col-xs-6">
                        <button class="btn btn-info btn-open-nested-dialog edit-user" data-url="{:url('user/user/edit')}" data-id="{$userData['id']}" style="color:#fff;background-color:#f75444">编辑资料</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-body">
            <div class="row user-baseinfo">
                <div class="panel-heading print-flex">
                    <img src="{$userData.avatar}" class="img-lg img-circle" alt="">
                </div>
                <div class="col-xs-2">
                    <div class="float-right col-xs-12" >
                        <p class="text-left">{$userData['username']} {$userData['mobile']}</p>
                        <p class="text-left"><span class="label label-warning">{$groupName}</span> <!--label class="label label-info">升级等级会员</label--></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel-body">
            <div class="row p-2">
                <div class="col-xs-3">
                    客户编号：<span>{$userData['code']}</span>
                </div>
                <div class="col-xs-3">
                    生日：<span>{$userData['birthday']}</span>
                </div>
                <div class="col-xs-3">
                    归属门店：<span>{$userData['shop_name']}</span>
                </div>
            </div>
            <div class="row p-2">
                <div class="col-xs-3">
                    营销顾问：<span></span>
                </div>
                <div class="col-xs-3">
                    注册时间：<span>{$userData['createtime']}</span>
                </div>
                <div class="col-xs-3">
                    客户来源：{$userData['juser_user']}<span></span>
                </div>
            </div>
            <div class="row p-2">
                <div class="col-xs-12">
                    客户标签：<span class="label label-success set-tags"  data-url="{:url('user/user/addusertag')}" data-id="{$userData['id']}" style="color:#f75444;background-color:#f0f0f0;">+新增标签</span> 
                    {foreach name="userTags" item="vo"}
                        <span class="label label-warning" style="color:#000;background-color:#f0f0f0;">{$vo['tag']['name']}</span> 
                    {/foreach}
                </div>
            </div>
            <div class="row p-2">
                <div class="col-xs-12">
                    备注：<span>{$userData['remark']}</span>
                </div>
            </div>
        </div>
        <div class="panel-body">
            <div class="row p-2">
                <span>统计信息</span>
            </div>
            <div class="row p-2">
                <table id="statistics_table" class="table table-striped table-bordered table-hover table-nowrap" width="100%">
                    <thead>
                        <tr>
                            <th>余额（元）</th>
                            <th>累计消费总额（元）</th>
                            <th>总消费次数</th>
                            <th>最近消费时间</th>
                            <th>到店次数</th>
                            <th>上一次到店</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td> 2000.00元 <a href="javascript:void(0);" style="color:#f75444">明细</a></td>
                            <td>20</td>
                            <td>10</td>
                            <td>2024-10-10</td>
                            <td>2</td>
                            <td>2024-10-10</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="row p-2">
                <ul class="nav nav-pills items" >
                  <li class="nav-pills-active">
                    <a href="javascript:void(0);">卡项（{$orderItemCount}）</a>
                  </li>
                  <li><a href="javascript:void(0);">优惠券（{$couponCount}）</a></li>
                </ul>
            </div>
            <div class="row p-2 item-list">
                <div class="col-xs-12">
                    {foreach name="orderItemList" item="vo"}
                    <div class="hero-unit col-xs-3">
                        <ul>
                            <li>{$vo['name']}</li>
                            <li>开卡门店：{$vo['shop_name']}</li>
                            <li>剩余次数：{$vo['spent']}次</li>
                            <li>有效期：{$vo['validitytime']}</li>
                        </ul>
                    </div>
                    {/foreach}
                </div>
            </div>
            <div class="row p-2 item-list coupon-item-list">
                <div class="col-xs-12">
                    {foreach name="couponList" item="vo1"}
                    <div class="hero-unit col-xs-3">
                        <ul>
                            <li>{$vo1['name']}</li>
                            <li>开卡门店：{$vo1['shop_name']}</li>
                            <li>剩余次数：{$vo1['validity']}次</li>
                            <li>有效期：{$vo1['enddate']}</li>
                        </ul>
                    </div>
                    {/foreach}
                </div>
            </div>
            <div class="row p-2">
                <span>统计信息</span>
            </div>
            <div class="row p-2">
                <ul class="nav nav-pills" >
                  <li class="nav-pills-active">
                    <a href="javascript:void(0);">交易记录（20）</a>
                  </li>
                  <!-- <li><a href="javascript:void(0);">跟进记录（10）</a></li> -->
                </ul>
            </div>
            <div class="row p-2">
                <table id="order_table" class="table table-striped table-bordered table-hover table-nowrap" width="100%"></table>
            </div>
        </div>
    </div>
</div>